<template bindable="router,authenticated">
  <nav
    class="navbar navbar-default navbar-fixed-top"
    role="navigation"
  >
    <div class="navbar-header">
      <button
        type="button"
        class="navbar-toggle"
        data-toggle="collapse"
        data-target="#navigation-navbar-collapse-1"
      >
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a
        class="navbar-brand"
        href="#"
      >
        <i class="fa fa-home"></i>
        <span>${router.title}</span>
      </a>
    </div>

    <div
      class="collapse navbar-collapse"
      id="navigation-navbar-collapse-1"
    >
      <ul class="nav navbar-nav">
        <li
          repeat.for="row of router.navigation | authFilter: authenticated"
          class="${row.isActive ? 'active' : ''}"
        >
          <a
            data-toggle="collapse"
            data-target="#navigation-navbar-collapse-1.in"
            href.bind="row.href"
          >${row.title}</a>
        </li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li
          class="loader"
          if.bind="router.isNavigating"
        >
          <i class="fa fa-spinner fa-spin fa-2x"></i>
        </li>
      </ul>
    </div>
  </nav>
</template>
